<template>
	<view class="">
		<uni-nav-bar title="补液订单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
		<view class="title" >{{fillingAll.fill_status_text}}</view>
		<view class="recodeList">
			<view class="recodes"><view>时间</view><view>{{fillingAll.createtime}}</view></view>
			<view class="recodes"><view>出液机</view><view>{{fillingAll.fill_name}}</view></view>
			<view class="recodes"><view>受液机</view><view>{{fillingAll.to_fill_name}}</view></view>
			<view class="recodes"><view>下单量</view><view><text>{{fillingAll.amount}}</text><text>公斤</text></view></view>
			<view class="recodes"><view>实际补液量</view><view><text>{{fillingAll.true_amount}}</text><text>公斤</text></view></view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { navBack } from '@/utils/navigator';
	import { subject, subscribe, toPublish, unsubscribe } from '@mqtt';
	import { Infusion } from '@/gql/Infusion';
	import { ref,Ref } from 'vue';
	import { showLoading} from '@/utils/prompt';
	import { onLoad,onUnload,onShow} from '@dcloudio/uni-app';
	import type { Subscription } from 'rxjs';
	import { getDriverID } from '@/stores/driverID';
	const driver_id = getDriverID();
	const orderID=ref('')
	const fillingAll: Ref<any> = ref({});
	// data
	let subscription: Subscription = null;
	onLoad((pearm)=>{
		orderID.value=pearm.id
		// 订阅主题
		topics();
	})
	onShow(()=>{
		fillLists()
	})
	// 获取订单详情
	function fillLists() {
	  showLoading('加载中');
	  const payload = {
	    query: Infusion,
	    variables: {
	      order_id:Number(orderID.value)
	    },
	  };
	  toPublish('ql/fill/getFillOrderInfo', payload, (obj: any) => {
	    uni.hideLoading();
	    const { data } = obj;
	    fillingAll.value = data.fill_order_info;
	  });
	}
	
	/**
	 * 订阅主题
	 */
	function topics() {
	  const topic = 'formal/v1/order/fill_status/client/' + driver_id;
	  toSubscribe();
	  subscribe(topic);
	}
	/**
	 * 取消订阅
	 */
	function deltopics() {
	  toUnsubscribe();
	  const topic = 'formal/v1/order/fill_status/client/' + driver_id;
	  unsubscribe(topic);
	}
	
	function toSubscribe() {
	  if (subscription === null) {
	    subscription = subject.subscribe(fillLists);
	  }
	}
	
	function toUnsubscribe() {
	  subscription.unsubscribe();
	  subscription = null;
	}
	onUnload(() => {
	  if (subscription !== null) {
	    subscription.unsubscribe();
	  }
	  deltopics();
	});
</script>
<style scoped lang="less">
		@import url('../Infusion/less/InfusionOrder.less');
</style>
<style>
.datas >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.datas >>> .uni-date-x {
  font-size: 30rpx !important;
}
.datas >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>